<template>
  <!-- 演示产品管理-->
  <div class="page">
    <div class="page_main">
      <el-button type="primary" icon="el-icon-plus" @click="addHandle('type')">
        添加产品分类
      </el-button>

      <div :key="type.id" v-for="type in productList" style="height: 20vh;padding: 10px">
        <p class="tag_title">
          <el-tag closable @close="handleDelete(type.id,'type')">{{type.name}}</el-tag>
        </p>
        <div style="padding: 10px">
          <el-tag
            effect="dark"
            type="success"
            style="background-color: #0DC26B"
            :key="tag.id"
            v-for="tag in type.subMenu"
            closable
            :disable-transitions="false"
            @close="handleDelete(tag.id,'product')">
            {{tag.name}}(￥{{tag.price}})
          </el-tag>
          <el-button class="button-new-tag" size="small" type="success" icon="el-icon-circle-plus"
                     @click="addHandle('product',type.id)">
            添加型号
          </el-button>
        </div>

      </div>
      <!-- 新增弹窗 -->
      <el-dialog :title="dialogTitle" :visible.sync="isShowDialog" :close-on-click-modal="false"
                 width="520px">
        <!-- 具体form表单 -->
        <el-form label-position="right" ref="form" :rules="rules" :model="form" label-width="110px">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入名称"></el-input>
          </el-form-item>
          <el-form-item label="单价信息" prop="price">
            <el-input v-model="form.price" placeholder="请输入产品单价"></el-input>
          </el-form-item>
        </el-form>
        <!-- 操作按钮 -->
        <span slot="footer" class="dialog-footer">
        <el-button type="info" class="common_btn-white" @click="isShowDialog = false">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="validateForm">确定</el-button>
      </span>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import {
  addProductType,
  delProductType,
  getProductList,
  addProduct,
  delProduct,
} from '@/services/ERP/sale'
import ItemMixins from "../item.mixins";
// form表单校验规则
export default {
  mixins: [ItemMixins],
  data() {
    return {
      activeName: 'type',
      // 表单校验的规则
      rules: {
        name: {required: true, message: '请输入名称'}
      },
      form: {},
      isShowDialog: false, // 是否显示弹窗
      productList: [],
      type: '',//表单类型，type/product
      dialogTitle: '',
    }
  },
  methods: {
    addHandle(type, tagMenuId) {
      this.type = type
      this.form = {
        tagMenuId: tagMenuId
      }
      this.dialogTitle = type === 'type' ? '新增演示产品分类' : '新增产品型号'
      this.isShowDialog = true
    },
    async submitDelete(id) {
      let action = this.type === 'type' ? delProductType : delProduct
      let res = await action({id: id})
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: '删除成功！'
        })
        this.getProductList();
      }
    },
    handleDelete(id, type) {
      this.type = type
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitDelete(id)
      }).catch(() => {

      });
    },
    validateForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submit()
        }
      })
    },
    //获取货品分类
    async getProductList() {
      let res = await getProductList();
      this.productList = res.data || []
    },
    async submit() {
      let action = this.type === 'type' ? addProductType : addProduct
      let res = await action(this.form)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: '添加成功！'
        })
        this.isShowDialog = false
        this.getProductList()
      }
    },
  },
  mounted() {
    this.getProductList()
  },
}
</script>

<style lang="less" scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .button-new-tag {
    background-color: #0DC26B;
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

  .tag_title {
    border-bottom: 2px solid #dbdbdb;
    font-size: 20px;
    padding: 10px;
    color: #228af5;
  }
</style>
